<script setup lang="ts">
import s from '@/assets/img/icon/ic_shangjiantou.png'
import x from '@/assets/img/icon/ic_xiajiantou.png'

import {ref, watch} from "vue";

const props = defineProps({
  data:{
    type:Object,
    default(){
      return {}
    }
  }
})

const legendData = ref(['无机盐量','蛋白质量','脂肪量','其他','细胞外液','细胞内液'])

const smfxOption = ref({});

const setOption = () => {
  const zfl:number = Number((props.data?.weight * (props.data?.fp / 100)).toFixed(1))
  smfxOption.value = {
    title: [
      {
        textStyle: {},
      },
      {
        text:`{name|${props.data?.weight}kg}\n{val|总体重}`,
        textStyle:{
          rich: {
            name: {
              fontSize: 32,
              align: 'center',
              fontWeight: 'bold',
              padding: [20, 0],
              color: '#1A1A1A',
            },
            val: {
              fontSize: 16,
              align: 'center',
              color: '#808080',
            },
          }
        },
        top: 'center',
        right: 'center',
      },
    ],
    series: [
      {
        color:['#FE515F','#F7B500','#FC7916','#CCCCCC','#09CDD5','#3786FD'],
        type: 'pie',
        animation:false,
        clockWise: false,
        hoverAnimation:false,
        radius: ['40%', '45%'],
        center:['50%', '53%'],
        avoidLabelOverlap: true,
        padAngle: 2,
        itemStyle: {
          borderRadius: 5
        },
        label: {
          position: 'outside',
          normal: {
            formatter: (val:any)=>{
              // console.log(val)
              // switch (val.dataIndex) {
              //   case 0:
              //     return `{icon${val.dataIndex}|●}{name|${val.name}}\n{value|${val.value}kg}`
              //   case 1:
              //     return `{icon${val.dataIndex}|●}{name|${val.name}}\n{value|${val.value}kg}${val.value < val.data?.normal?.[0] ? '{xia|↓}' : '{shang|↑}'}\n{f|${val.data?.normal?.[0]}~${val.data?.normal?.[1]}}`
              //   case 2:
              //     return `{icon${val.dataIndex}|●}{name|${val.name}}\n{value|${val.value}kg}${val.value < val.data?.normal?.[0] ? '{xia|↓}' : '{shang|↑}'}\n{f|${val.data?.normal?.[0]}~${val.data?.normal?.[1]}}`
              //   case 3:
              //     return `{icon${val.dataIndex}|●}{name|${val.name}}\n{value|${val.value}kg}`
              //   case 4:
              //     return `{icon${val.dataIndex}|●}{name|${val.name}}\n{value|${val.value}kg}`
              //   case 5:
              //     return `{icon${val.dataIndex}|●}{name|${val.name}}\n{value|${val.value}kg}`
              // }

              if(val.data?.normal){
                return `{icon${val.dataIndex}|●}{name|${val.name}}\n{value|${val.value}kg}${val.value < val.data?.normal?.[0] ? '{xia|}' : '{shang|}'}\n{f|${val.data?.normal?.[0]}~${val.data?.normal?.[1]}}`
              }else{
                return `{icon${val.dataIndex}|●}{name|${val.name}}\n{value|${val.value}kg}`
              }
            },
            align:'left',
            rich: {
              icon0: {
                fontSize: 10,
                color: '#FE515F'
              },
              icon1: {
                fontSize: 10,
                color: '#F7B500'
              },
              icon2: {
                fontSize: 10,
                color: '#FC7916'
              },
              icon3: {
                fontSize: 10,
                color: '#CCCCCC'
              },
              icon4: {
                fontSize: 10,
                color: '#09CDD5'
              },
              icon5: {
                fontSize: 10,
                color: '#3786FD'
              },
              name: {
                fontSize: 18,
                padding: [0, 10, 5, 4],
              },
              value:{
                fontSize: 18,
                padding: [0, 5, 0, 14],
                fontWeight: 600,
                align:'left',
              },
              xia:{
                backgroundColor:{
                  image: x
                },
                width: 6,
                height: 12,
                // padding: [10, 0, 0, 0],
                // fontSize: 18,
                // color: '#3786FD',
                // fontWeight: 600,
                align:'left',
              },
              shang:{
                backgroundColor:{
                  image: s
                },
                width: 6,
                height: 12,
                // padding: [10, 0, 0, 0],
                // fontSize: 18,
                // color: '#FB2D19',
                // fontWeight: 600,
                align:'left',
              },
              f:{
                fontSize: 12,
                color:'#808080',
                padding: [5, 0, 0, 14],
                align:'left',
              },
            },
          },
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: props.data?.minerals,
            name: '无机盐量',
            label:{
              show:true,
              padding:[-50,-100,0,0]
            }
          },
          { value: props.data?.protein, name: '蛋白质量', normal:props.data?.protein_normal },
          { value: zfl, name: '脂肪量',normal: [
              (props.data?.weight * (props.data?.fp_normal?.[0] / 100)).toFixed(1),
              (props.data?.weight * (props.data?.fp_normal?.[1] / 100)).toFixed(1)
            ]
          },
          {
            value: (props.data?.weight - props.data?.minerals - props.data?.protein - zfl - props.data?.ecf - props.data?.icf).toFixed(1),
            name: '其他'
          },
          {
            value: props.data?.ecf,
            name: '细胞外液'
          },
          {
            value: props.data?.icf,
            name: '细胞内液'
          }
        ]
      },
      {
        name: '统计',
        type: 'gauge',
        splitNumber: 100, //刻度数量
        min: 0,
        max: 100,
        radius: '47%', //图表尺寸
        center:['50%', '53%'],
        startAngle: 90,
        endAngle: -269.9999,
        axisLine: {
          show: false,
        },
        legend:{
          show:false,
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: '#0dc2fe',
            width: 0
          },
          length: 0,
          splitNumber: 1
        },
        splitLine: {
          show: true,
          length: 5,
          lineStyle: {
            color: '#FEEAE8',
          }
        },
        axisLabel: {
          show: false
        },
        pointer: { //仪表盘指针
          show: 0,
        }
      },
    ]
  }
}

watch(()=>props.data,()=>{
  setOption()
},{
  immediate:true,
  deep:true
})

</script>

<template>
<div class="flex justify-center mt-[10px]">
  <v-chart class="chart" autoresize :option="smfxOption" />
</div>
</template>

<style scoped lang="scss">
.chart{
  width: 446px;
  height: 374px;
}
</style>
